<template>
    <div class="all-box">
        <div class="home-look">
            <span class="more">LOOK直播</span>
            <span class="box">更多></span>
        </div>
            <div class="wrapper" ref="wrapper">
                <ul class="content" ref="content">
                    <li v-for="(item,i) in listData" :key="i">
                        <div class="cover">
                            <img :src="item.picUrl" radius="1rem"/>
                            <span>{{ item.playCount}}直播中</span>
                        </div>
                        <span>{{ item.name }}</span>
                    </li>
                </ul>
            </div>

    </div>
</template>
<script>
import BScroll from "better-scroll";
export default {
    data(){
        return{
            listData:[]
        }
    },
    created(){
        this.getSongListData()
    },
    methods:{
        getSongListData(){
            this.$request('get','/personalized/djprogram')
            .then(res=>{
                console.log(res)
                if(res.code==200){
                    this.listData=res.result;
                }
                this.betterScrollHorizontal(this.listData.length,10);
            });
        },
        betterScrollHorizontal(num,itemWidth){
            this.$refs.content.style.width=num * itemWidth + "rem";
                this.$nextTick(() => {
                    this.scroll =new BScroll(this.$refs.wrapper, {
                        scrollY:false,
                        scrollX: true,
                        startX: 0,
                    });
                });
          
    },
},
}
</script>
<style scoped>
.all-box{
    display: flex;
    flex-direction: column;
    width: 414px;
    height: 200px;
    margin: auto;
    /* border: 0.5px solid #e7e7e7; */
    border-radius: 10px;
    box-shadow:0px 0px 3px 3px#e9e7e7;
    background-color: rgb(255, 255, 255);
    margin-bottom: 10px;
}
.home-look{
    position: relative;
    display: flex;
    flex-direction: row;
    width: 414px;
    height: 40px;
}
.more{
    font-size: 25px;
    margin: 10px;
    font-style: inherit;
}
img{
    width: 100px;
    height: 100px;
    border-radius: 10%;
}
.box{
    position: absolute;
    right: 0px;
    margin: 10px;
    border: 1px solid gray;
    border-radius: 12px;
    /* text-align: center; */
    font-style: inherit;
    width: 50px;
    height: 30px;
}
.cover > span {
        position: absolute;
        right: 0.3rem;
        top: 0.2rem;
        background-color:#c01d1d;
        color: white;
        font-size: 10px;
        border-radius: 1rem;
        width: 3rem;
        display: inline-block;
    }
.cover {
    position: relative;
    }
.wrapper {
    width: 100%;
    overflow: hidden;
    }
.content{
    display: flex;
    flex-direction: row;
    height: 160px;
    margin: auto;

    }
.content > .cover{
    width: calc(6*120px);
    }
ul.content li {
    width: 120px;
    }
ul.content li * {
      margin: 2px;
    }
ul.content li > span {
    font-size: 0.5rem;
    color: #543b3b;
    overflow: hidden;
    width: 10px;
    text-overflow:ellipsis;
    }
</style>